<script setup lang="ts">
import Fruit from "@/modal/Fruit";
import IconFont from "@/components/IconFont/IconFont.vue";
import {IconColor, IconType} from "@/components/IconFont/type";
import {FruitName} from "@/components/type";
import {defineComponent, type Reactive} from "vue";

interface iFruit {
  fruit: Reactive<Fruit>;
}

const props = defineProps<iFruit>()
const fruit = props.fruit;
const growUp = () => {
  emits('emitGrowUp', fruit);
}
const emits = defineEmits(['emitGrowUp']);
// 确定是哪种水果图标（多此一举，但是更容易看懂）
const whichIcon = (name: string) => {
  switch (name) {
    case FruitName.APPLE:
      return IconType.APPLE;
    case FruitName.PEACH:
      return IconType.PEACH;
    case FruitName.BLACKBERRY:
      return IconType.BLACKBERRY;
    case FruitName.RASPBERRY:
      return IconType.RASPBERRY;
  }
}
</script>
<template>
  <div class="fruit-name container-fluid"><span class="user-select-none">{{ fruit.chineseName }}</span></div>
  <div @click="growUp"
       class="fruit-items container-fluid">
    <template v-for="(index) in fruit.maxStep">
      <div :class="[{ active: fruit.currentStep >= index },
                    { gain: fruit.isHtmlActive(index) }]"
           class="fruits-step">
        <div class="fruit-icon">
          <icon-font v-if="fruit.isHtmlActive(index)"
                     :icon-type="whichIcon(fruit.name)"
                     font-size="xx-large"
          ></icon-font>
        </div>
        <div class="bonus-icon">
          <icon-font
            v-if="fruit.goodsNum"
            :icon-type="IconType.GOODS"
            :number="3"
            :color="IconColor.GOODS"
            font-size="large">
          </icon-font>
          <icon-font
            v-if="fruit.score!=undefined && fruit.isHtmlActive(index)"
            :icon-type="fruit.name===FruitName.RASPBERRY && index%3!=0?IconType.NULL:IconType.SCORE"
            :number="fruit.name===FruitName.RASPBERRY? fruit.showHtmlScore(index):fruit.score"
            :color="IconColor.SCORE"
            font-size="large">
          </icon-font>
          <icon-font
            v-if="fruit.action"
            :icon-type="fruit.isHtmlActive(index)? IconType.IRRIGATE:IconType.NULL"
            :color="IconColor.IRRIGATE">
          </icon-font>
        </div>
      </div>
    </template>
  
  </div>
</template>

<style scoped>

.fruit-name {
  display: flex;
  align-items: flex-end;
  height: 20px;
}

.fruit-items {
  display: flex;
  flex-direction: row;
  height: calc(24% - 20px);
  justify-content: space-around;
  align-items: self-start;
}

.fruits-step.gain {
  border-color: transparent;
}

.fruit-items:nth-child(2) > .fruits-step.active {
  background-color: rgba(255, 21, 21, 0.8);
}

.fruit-items:nth-child(2) > .fruits-step.gain.active {
  color: rgba(255, 21, 21, 0.8);
  background-color: transparent;
}

.fruit-items:nth-child(4) > .fruits-step.active {
  background-color: rgba(244, 124, 162, 1);
}

.fruit-items:nth-child(4) > .fruits-step.gain.active {
  color: rgba(244, 124, 162, 1);
  background-color: transparent;
}

.fruit-items:nth-child(6) > .fruits-step.active {
  background-color: rgba(90, 5, 129, .8);
}

.fruit-items:nth-child(6) > .fruits-step.gain.active {
  color: rgba(90, 5, 129, .8);
  background-color: transparent;
}

.fruit-items:nth-child(8) > .fruits-step.active {
  background-color: rgba(205, 0, 77, 0.8);
}

.fruit-items:nth-child(8) > .fruits-step.gain.active {
  color: rgba(205, 0, 77, 0.8);
  background-color: transparent;
}

.fruits-step {
  position: relative;
  height: 25px;
  width: 25px;
  border: 1px solid rgba(128, 128, 128, .2);
  border-radius: 15%;
  transition: .7s;
}

.fruits-step ~ .fruits-step {
  margin-left: auto;
}

.bonus-icon {
  position: relative;
  left: 3px;
}

.fruit-icon {
  position: relative;
  line-height: 0.8;
  top: 2px;
}


</style>